<!doctype html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
<!--	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>圆周运动泛起的波浪</title>
	<style>
		*{ margin: 0; padding: 0; box-sizing: border-box; }
		body{ background: #333333;}
		ul, ol{ list-style: none; }
		.root{ display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; }
		.root .center{ position: relative; pointer-events: none; }
		.root .center .arrange{
			display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
			width: 1030px;
			/*height: 580px;*/
			margin: -30px 0 0 -30px;
			padding: 30px 0 0 30px;
			background: #292929;
		}
		.root .center .arrange .circle{
			position: relative;
			width: 80px;
			height: 80px;
			margin: -30px 0 0 -30px;
			border-radius: 100px;
			border: 1px solid #333333;
			animation: rotate 2s linear infinite;
		}
		.root .center .arrange .circle .dot{
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 10px;
			height: 10px;
			border-radius: 10px; background: #CE0BE5;
		}
		.root .center .arrange li:nth-child(20n+1) .circle{ animation-delay: 100ms;}
		.root .center .arrange li:nth-child(20n+2) .circle{ animation-delay: 200ms;}
		.root .center .arrange li:nth-child(20n+3) .circle{ animation-delay: 300ms;}
		.root .center .arrange li:nth-child(20n+4) .circle{ animation-delay: 400ms;}
		.root .center .arrange li:nth-child(20n+5) .circle{ animation-delay: 500ms;}
		.root .center .arrange li:nth-child(20n+6) .circle{ animation-delay: 600ms;}
		.root .center .arrange li:nth-child(20n+7) .circle{ animation-delay: 700ms;}
		.root .center .arrange li:nth-child(20n+8) .circle{ animation-delay: 800ms;}
		.root .center .arrange li:nth-child(20n+9) .circle{ animation-delay: 900ms;}
		.root .center .arrange li:nth-child(20n+10) .circle{ animation-delay: 1000ms;}
		.root .center .arrange li:nth-child(20n+11) .circle{ animation-delay: 1100ms;}
		.root .center .arrange li:nth-child(20n+12) .circle{ animation-delay: 1200ms;}
		.root .center .arrange li:nth-child(20n+13) .circle{ animation-delay: 1300ms;}
		.root .center .arrange li:nth-child(20n+14) .circle{ animation-delay: 1400ms;}
		.root .center .arrange li:nth-child(20n+15) .circle{ animation-delay: 1500ms;}
		.root .center .arrange li:nth-child(20n+16) .circle{ animation-delay: 1600ms;}
		.root .center .arrange li:nth-child(20n+17) .circle{ animation-delay: 1700ms;}
		.root .center .arrange li:nth-child(20n+18) .circle{ animation-delay: 1800ms;}
		.root .center .arrange li:nth-child(20n+19) .circle{ animation-delay: 1900ms;}
		.root .center .arrange li:nth-child(20n+20) .circle{ animation-delay: 2000ms;}
		@keyframes rotate{
			0%{ transform: rotate(0); }
			100%{ transform: rotate(360deg); }
		}
	</style>
</head>
<body>
<div class="root">
	<div class="center">
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
		<ul class="arrange">
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
			<li>
				<div class="circle">
					<div class="dot"></div>
				</div>
			</li>
		</ul>
	</div>
</div>
</body>
</html>
